<template>
  <div class="page">
    <s-header name="添加巡查记录"></s-header>
    <van-form @submit="onSubmit">
      <div class="card-box">
        <div class="header-title">巡查信息</div>
        <van-divider />
        <div class="content">
          <van-cell-group>
            <van-field
              v-model="recordForm.checkDate"
              is-link
              readonly
              name="calendar"
              label="巡查日期"
              required
              placeholder="点击选择日期"
              @click="showCalendar = true"
              :rules="[{ required: true, message: '请选择巡查日期' }]"
            />
            <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
            <van-field
              v-model="recordForm.presentDept"
              name="到场部门"
              required
              label="到场部门"
              placeholder="请输入到场部门"
              :rules="[{ required: true, message: '请填写到场部门' }]"
            />
            <van-field
              v-model="recordForm.presentPerson"
              name="到场人员"
              required
              label="到场人员"
              placeholder="请输入到场人员"
              :rules="[{ required: true, message: '请填写到场人员' }]"
            />
            <van-field
              v-model="recordForm.checkContent"
              rows="3"
              autosize
              type="textarea"
              maxlength="300"
              show-word-limit
              required
              name="检查内容"
              label="检查内容"
              placeholder="请输入检查内容"
              :rules="[{ required: true, message: '请填写检查内容' }]"
            />
          </van-cell-group>
        </div>
      </div>
      <div class="card-box">
        <div class="header-title title-required">相关材料</div>
        <van-divider />
        <div class="item-list">
          <image-upload v-model:value="otherFileList" fileType="A13" @uploadBack="uploadBack"></image-upload>
        </div>
      </div>
      <div class="card-box">
        <div class="header-title title-required">到场图片</div>
        <van-divider />
        <div class="item-list">
          <image-upload v-model:value="pictures" fileType="A14" @uploadBack="uploadBack"></image-upload>
        </div>
      </div>
      <div class="card-box">
        <div class="header-title title-required">巡查结果</div>
        <van-divider />
        <div class="item-list">
          <van-radio-group v-model="recordForm.patrolResult" direction="horizontal">
            <van-radio name="32">无问题</van-radio>
            <van-radio name="33">追加整改</van-radio>
            <van-radio name="99">挂起</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="card-box">
        <div class="header-title title-required">办理意见</div>
        <van-divider />
        <div class="content">
          <van-field
            v-model="recordForm.handleOpinions"
            class="noPadding"
            label=""
            rows="3"
            autosize
            type="textarea"
            placeholder="请输入办理意见"
            :rules="[{ required: true, message: '请输入办理意见' }]"
          />
        </div>
      </div>
      <div class="btn-group">
        <van-button type="button" class="cus-btn btn-default" @click="handleBack">取消</van-button>
        <van-button class="cus-btn btn-success" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import sHeader from '@/components/SimpleHeader'
import { useRoute, useRouter } from 'vue-router'
import ImageUpload from '@/components/ImageUpload'
import { savePatrolPatrol } from '@/service/patrol'
import { Toast } from 'vant'
export default {
  components: {
    sHeader,
    ImageUpload,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      applyBaseId: '',
      loitBuildNodesId: '',
      showCalendar: false,
      pictures: [],
      otherFileList: [],
      attachInfoDTOList: [],
      recordForm: {
        checkDate: '',
        presentDept: '',
        presentPerson: '',
        checkContent: '',
        patrolResult: '32',
        handleOpinions: '',
      },
    })
    onMounted(() => {
      state.applyBaseId = route.query.applyBaseId
      state.loitBuildNodesId = route.query.nodesId
    })
    //  返回
    const handleBack = () => {
      router.go(-1)
    }
    const onSubmit = () => {
      // if (state.attachInfoDTOList.length > 0) {
      //   state.attachInfoDTOList.forEach((item, index) => {
      //     item.sort = index
      //   })
      // } else {
      //   Toast.fail('请上传相关材料和图片!')
      //   return false
      // }
      // pictures: [],
      // otherFileList: [],
      let pictures = JSON.parse(JSON.stringify(state.pictures))
      let otherFileList = JSON.parse(JSON.stringify(state.otherFileList))
      if (pictures.length > 0) {
        pictures.forEach((item, index) => {
          item.sort = index
          item.url = item.filePath ? item.filePath : item.url
        })
      } else {
        Toast.fail('请上传到场图片!')
        return false
      }
      if (otherFileList.length > 0) {
        otherFileList.forEach((item, index) => {
          item.sort = index
          item.url = item.filePath ? item.filePath : item.url
        })
      } else {
        Toast.fail('请上传相关材料!')
        return false
      }
      // if(state.)
      const pms = {
        applyBaseId: state.applyBaseId,
        loitBuildNodesId: state.loitBuildNodesId,
        attachInfoDTOList: [...pictures, ...otherFileList],
        ...state.recordForm,
      }
      savePatrolPatrol(pms).then((res) => {
        if (res.success) {
          Toast.success('保存成功')
          router.go(-1)
        }
      })
    }
    //  选择日期
    const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    const onConfirm = (date) => {
      state.recordForm.checkDate = formatDate(date)
      state.showCalendar = false
    }

    // 文件上传后回调
    const uploadBack = (fileList, type) => {
      if (type === 'A13') {
        state.otherFileList = fileList
      } else if (type === 'A14') {
        state.pictures = fileList
      }
    }

    return {
      ...toRefs(state),
      handleBack,
      onConfirm,
      onSubmit,
      uploadBack,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  font-weight: 400;
  .card-box {
    margin-top: 16px;
    padding: 4px;
    background: #ffffff;
    border-radius: 10px;
    .header-title {
      padding: 16px 0 0 16px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }
    /deep/.van-cell__title {
      font-size: 16px;
      color: #9297ae;
    }
    /deep/.van-cell__value {
      font-size: 16px;
      color: #2e3f6a;
    }
    .item-list {
      padding: 10px 16px;
      display: flex;
      .item-image {
        margin-right: 5px;
      }
      .item-name {
        margin-right: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #3487f6;
      }
      .item-size {
        font-size: 14px;
        font-weight: 400;
        color: #9297ae;
      }
    }
    .content {
      padding: 0 16px;
      padding-bottom: 16px;
      // font-size: 15px;
      // font-weight: 400;
      // line-height: 25px;
      // color: #2e3f6a;
    }
  }
  .btn-group {
    padding: 20px 0;
    display: flex;
    .cus-btn {
      font-size: 16px;
      width: 100%;
      margin-right: 10px;
      &:nth-last-child(0) {
        margin: 0;
      }
    }
  }
}
.title-required::before {
  margin-right: 5px;
  color: var(--van-field-required-mark-color);
  content: '*';
}
</style>